<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :sm="4">
        <el-card class="box-card">
          <div class="value">{{ data.total_channel_money || 0 }}</div>
          <div class="subtitle">渠道结算价</div>
        </el-card>
      </el-col>
      <el-col :sm="4">
        <el-card class="box-card">
          <div class="value">{{ data.total_actual_channel_money || 0 }}</div>
          <div class="subtitle">渠道价实际账期金额</div>
        </el-card>
      </el-col>
    </el-row>
    <div class="filter-container">
      <!--      <el-select-->
      <!--          class="filter-item"-->
      <!--          v-model="listQuery.app_client_id"-->
      <!--          placeholder="选择客户端"-->
      <!--          style="width: 160px"-->
      <!--          clearable-->
      <!--          filterable-->
      <!--          remote-->
      <!--          reserve-keyword-->
      <!--          :remote-method="fetchClientNames"-->
      <!--          :loading="loadingClients"-->
      <!--          @visible-change="handleClientSelectVisible"-->
      <!--      >-->
      <!--        <el-option-->
      <!--            v-for="item in clientNameOptions"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value"-->
      <!--        />-->
      <!--      </el-select>-->


      <el-input class="filter-item" v-model="listQuery.hotel_name" placeholder="酒店名称" style="width: 220px;"
                clearable/>

      <el-input class="filter-item" v-model="listQuery.order_id" placeholder="订单号" style="width: 220px;"
                clearable/>

      <!--      <el-select class="filter-item" v-model="listQuery.state_arr" placeholder="订单状态" style="width: 160px"-->
      <!--                 multiple-->
      <!--                 clearable>-->
      <!--        <el-option label="新订单" value="0"/>-->
      <!--        <el-option label="已确认" value="1"/>-->
      <!--        <el-option label="已成功" value="2"/>-->
      <!--        <el-option label="已取消" value="3"/>-->
      <!--        <el-option label="已完成" value="4"/>-->
      <!--      </el-select>-->

      <el-input class="filter-item" v-model="listQuery.order_code" placeholder="锦江订单编号" style="width: 220px;"
                clearable/>

<!--      <el-select class="filter-item" v-model="listQuery.order_state_arr" placeholder="锦江订单状态" style="width: 160px"-->
<!--                 multiple-->
<!--                 clearable>-->
<!--        <el-option label="预订成功" :value="1"/>-->
<!--        <el-option label="已取消" :value="2"/>-->
<!--        <el-option label="预订未到" :value="3"/>-->
<!--        <el-option label="已入住" :value="4"/>-->
<!--        <el-option label="已完成" :value="5"/>-->
<!--      </el-select>-->

      <el-input class="filter-item" v-model="listQuery.system_order_no" placeholder="系统订单号" style="width: 220px;"
                clearable/>

<!--      <el-select class="filter-item" v-model="listQuery.system_order_status_arr" placeholder="系统订单状态" multiple-->
<!--                 style="width: 160px" clearable>-->
<!--        <el-option label="下单待处理" :value="100"/>-->
<!--        <el-option label="下单成功" :value="101"/>-->
<!--        <el-option label="下单失败" :value="102"/>-->
<!--        <el-option label="取消订单成功" :value="201"/>-->
<!--        <el-option label="取消订单失败" :value="202"/>-->
<!--      </el-select>-->
      <el-select class="filter-item" v-model="listQuery.pay_state_arr" placeholder="锦江支付状态" multiple
                 style="width: 160px" clearable>
        <el-option label="未付款" :value="0"/>
        <el-option label="已付款" :value="1"/>
        <el-option label="退款处理中" :value="2"/>
        <el-option label="已退款" :value="3"/>
      </el-select>
      <el-select class="filter-item" v-model="listQuery.profit_status" placeholder="盈亏状态"
                 style="width: 160px" clearable>
        <el-option label="亏损" :value="0"/>
        <el-option label="盈利" :value="1"/>
      </el-select>
      <div>
        入住时间:
        <el-date-picker
            class="filter-item"
            v-model="dateArr"
            type="daterange"
            :default-time="['00:00:00', '23:59:59']"
            align="right"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
        ></el-date-picker>
        离店时间:
        <el-date-picker
            class="filter-item"
            v-model="dateArr1"
            type="daterange"
            :default-time="['00:00:00', '23:59:59']"
            align="right"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
        ></el-date-picker>
        下单时间:
        <el-date-picker
            class="filter-item"
            v-model="dateArr2"
            type="daterange"
            :default-time="['00:00:00', '23:59:59']"
            align="right"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
        ></el-date-picker>
        <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
        <download-excel
            class="filter-item"
            :fields="json_fields"
            :fetch="handleExport"
            type="xls"
            name="订单列表.xls"
            worksheet="订单列表"
        >
          <!--      :before-generate="startPost"
            :before-finish="endPost"                :header="header"-->
          <el-button type="success" :loading="exportLoading">
            导出订单列表
          </el-button>
        </download-excel>
      </div>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
              :row-class-name="errorRow">
      <el-table-column label="订单号" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.order_id }}
        </template>
      </el-table-column>
      <el-table-column label="客户端名称" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.app_client ? scope.row.app_client.name : "-" }}
        </template>
      </el-table-column>
      <!--      <el-table-column label="自我游订单状态" min-width="120" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-tag type="primary" v-if="scope.row.state === '0'">新订单</el-tag>-->
      <!--          <el-tag type="warning" v-else-if="scope.row.state === '1'">已确认</el-tag>-->
      <!--          <el-tag type="success" v-else-if="scope.row.state === '2'">已成功</el-tag>-->
      <!--          <el-tag type="danger" v-else-if="scope.row.state === '3'">已取消</el-tag>-->
      <!--          <el-tag type="success" v-else-if="scope.row.state === '4'">已完成</el-tag>-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column label="下单时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.order_date }}
        </template>
      </el-table-column>
      <el-table-column label="渠道结算价" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.channel_money }}
        </template>
      </el-table-column>
      <el-table-column label="渠道价实际账期金额" min-width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.actual_channel_money||'-' }}
        </template>
      </el-table-column>
      <el-table-column label="联系人姓名" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.link_man }}
        </template>
      </el-table-column>

      <el-table-column label="联系人手机" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.link_phone }}
        </template>
      </el-table-column>

      <el-table-column label="入住时间" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.travel_date }}
        </template>
      </el-table-column>

      <el-table-column label="离店时间" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.end_travel_date }}
        </template>
      </el-table-column>
      <el-table-column label="实际离店时间" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.actual_end_travel_date }}
        </template>
      </el-table-column>
      <el-table-column label="酒店名称" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.hotel ? scope.row.hotel.inn_name : "" }}
        </template>
      </el-table-column>

      <el-table-column label="售卖房型名称" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.room_type ? scope.row.room_type.room_type_name : "" }}
        </template>
      </el-table-column>


      <el-table-column label="房间间数" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.room_num }}
        </template>
      </el-table-column>

      <el-table-column label="锦江订单编号" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.order_code }}
        </template>
      </el-table-column>

      <!--      <el-table-column label="锦江订单支付总价" min-width="140" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ scope.row.total_rate }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->

      <el-table-column label="锦江到店时间" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.last_arr_time }}
        </template>
      </el-table-column>

      <el-table-column label="锦江订单状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.order_state === 1">预订成功</el-tag>
          <el-tag type="danger" v-else-if="scope.row.order_state === 2">已取消</el-tag>
          <el-tag type="warning" v-else-if="scope.row.order_state === 3">预订未到</el-tag>
          <el-tag type="warning" v-else-if="scope.row.order_state === 4">已入住</el-tag>
          <el-tag type="success" v-else-if="scope.row.order_state === 5">已完成</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="锦江支付状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.pay_state === 0">未付款</el-tag>
          <el-tag type="success" v-else-if="scope.row.pay_state === 1">已付款</el-tag>
          <el-tag type="warning" v-else-if="scope.row.pay_state === 2">退款处理中</el-tag>
          <el-tag type="danger" v-else-if="scope.row.pay_state === 3">已退款</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="系统订单号" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.system_order_no }}
        </template>
      </el-table-column>

      <el-table-column label="系统订单状态" min-width="110" align="center">
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.system_order_status === 100">下单待处理</el-tag>
          <el-tag type="success" v-else-if="scope.row.system_order_status === 101">下单成功</el-tag>
          <el-tag type="danger" v-else-if="scope.row.system_order_status === 102">下单失败</el-tag>
          <el-tag type="success" v-else-if="scope.row.system_order_status === 201">取消订单成功</el-tag>
          <el-tag type="danger" v-else-if="scope.row.system_order_status === 202">取消订单失败</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作处理失败信息" min-width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.handle_error_message }}
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.remark || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>

      <!--      <el-table-column label="操作" width="250" align="center" fixed="right" class-name="small-padding fixed-width">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-button type="warning" size="mini" @click="handleModifyLastArrTime(scope.row)"-->
      <!--                     :disabled="scope.row.system_order_status !== 102">修改到店时间-->
      <!--          </el-button>-->

      <!--          <el-button type="warning" size="mini" @click="handleReOrder(scope.row)"-->
      <!--                     :disabled="!(scope.row.system_order_status === 102)">重新下单-->
      <!--          </el-button>-->

      <!--          <el-button type="warning" size="mini" @click="handleCancelOrder(scope.row)"-->
      <!--                     :disabled="!(scope.row.order_state === 1)">取消订单-->
      <!--          </el-button>-->

      <!--          <el-button type="warning" size="mini" @click="handleComplete(scope.row)"-->
      <!--                     :disabled="handleCompleteStatus(scope.row)">处理完成-->
      <!--          </el-button>-->
      <!--          <el-button type="warning" size="mini" @click="handleChangeSystemOrderStatus(scope.row)"-->
      <!--          >修改系统订单状态-->
      <!--          </el-button>-->
      <!--          <el-button type="warning" size="mini" @click="syncOrder(scope.row)">同步订单</el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[5,10,20,30,50]" :page-size="listQuery.limit"
                     :total="total" background layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <!-- 修改到店时间 -->
    <el-dialog title="修改到店时间" :visible.sync="dialogVisibleModifyLastArrTime" width="60%"
               :close-on-click-modal="false">
      <el-form ref="modifyLastArrTimeForm" :rules="modifyLastArrTimeRules" :model="modifyLastArrTimeForm"
               label-width="150px">
        <el-form-item label="修改到店时间" prop="last_arr_time">
          <el-date-picker v-model="modifyLastArrTimeForm.last_arr_time" type="datetime" placeholder="选择日期时间"
                          format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleModifyLastArrTime = false">取消</el-button>
        <el-button type="primary" @click="saveDataModifyLastArrTime" :loading="btnLoading">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改到店时间 -->

    <!-- 修改系统订单状态 -->
    <el-dialog title="修改系统订单状态" :visible.sync="dialogVisibleChangeSystemOrderStatus" width="60%"
               :close-on-click-modal="false">
      <el-form ref="changeSystemOrderStatusForm" :rules="changeSystemOrderStatusRules"
               :model="changeSystemOrderStatusForm"
               label-width="150px">
        <el-form-item label="修改系统订单状态" prop="system_order_status">
          <el-select class="filter-item" v-model="changeSystemOrderStatusForm.system_order_status"
                     placeholder="系统订单状态"
                     style="width: 160px" clearable>
            <el-option label="下单待处理" :value="100"/>
            <el-option label="下单成功" :value="101"/>
            <el-option label="下单失败" :value="102"/>
            <el-option label="取消订单成功" :value="201"/>
            <el-option label="取消订单失败" :value="202"/>
          </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleChangeSystemOrderStatus = false">取消</el-button>
        <el-button type="primary" @click="saveDataChangeSystemOrderStatus" :loading="btnLoading">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改系统订单状态 -->
  </div>
</template>

<script>
import request from "@/utils/request";
import downloadExcel from 'vue-json-excel'
import moment from "moment";

export default {
  components: {downloadExcel},
  data() {
    return {
      clientNameOptions: [],
      loadingClients: false,
      clientPage: 1,
      clientKeyword: '',
      clientFinished: false,
      pageSize: 99999999,

      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        app_client_id: "",
        order_id: "",
        state: "",
        order_code: "",
        order_state: "",
        system_order_no: "",
        system_order_status: "",
      },
      data: {
        total_account_money: 0,
        total_channel_money: 0
      },
      // 修改到店时间
      btnLoading: false,
      dialogVisibleModifyLastArrTime: false,
      modifyLastArrTimeForm: {
        order_id: "",
        last_arr_time: "",
      },
      modifyLastArrTimeRules: {
        last_arr_time: [{required: true, message: "到店时间不能为空", trigger: "change"}],
      },
      dialogVisibleChangeSystemOrderStatus: false,
      changeSystemOrderStatusForm: {
        order_id: "",
        system_order_status: "",
      },
      changeSystemOrderStatusRules: {
        system_order_status: [{required: true, message: "系统状态不能为空", trigger: "change"}],
      },
      dateArr: null,
      dateArr1: null,
      dateArr2: null,
      exportLoading: false,
      json_fields: {
        订单号: {
          field: 'order_id',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        // 自我游订单状态: {
        //   field: 'state',
        //   //自定义回调函数
        //   callback: (value) => {
        //     var state_remark;
        //     switch (value) {
        //       case '0':
        //         state_remark = '新订单'
        //         break;
        //       case '1':
        //         state_remark = '已确认'
        //         break;
        //       case '2':
        //         state_remark = '已成功'
        //         break;
        //       case '3':
        //         state_remark = '已取消'
        //         break;
        //       case '4':
        //         state_remark = '已完成'
        //         break;
        //       default:
        //         state_remark = ''
        //         break;
        //     }
        //
        //     return '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
        //   },
        // },
        下单时间: {
          field: 'order_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        渠道结算价: {
          field: 'channel_money',
          //自定义回调函数
          callback: (value) => {
            return  value
          },
        },
        渠道价实际账期金额: {
          field: 'actual_channel_money',
          //自定义回调函数
          callback: (value) => {
            return  value
          },
        },
        联系人姓名: {
          field: 'link_man',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        联系人手机: {
          field: 'link_phone',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        入住时间: {
          field: 'travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        离店时间: {
          field: 'end_travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        实际离店时间: {
          field: 'actual_end_travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        酒店名称: {
          field: 'hotel',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + (value ? value.inn_name : "") + '</p>'
          },
        },
        售卖房型名称: {
          field: 'room_type',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + (value ? value.room_type_name : "") + '</p>'
          },
        },
        房间间数: {
          field: 'room_num',
          //自定义回调函数
          callback: (value) => {
            return  value
          },
        },
        锦江订单编号: {
          field: 'room_num',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        锦江到店时间: {
          field: 'last_arr_time',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        锦江订单状态: {
          field: 'order_state',
          //自定义回调函数
          callback: (value) => {
            var state_remark;
            switch (value) {
              case 1:
                state_remark = '预订成功'
                break;
              case 2:
                state_remark = '已取消'
                break;
              case 3:
                state_remark = '预订未到'
                break;
              case 4:
                state_remark = '已入住'
                break;
              case 5:
                state_remark = '已完成'
                break;
              default:
                state_remark = ''
                break;
            }

            return '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
          },
        },
        锦江支付状态: {
          field: 'pay_state',
          //自定义回调函数
          callback: (value) => {
            var state_remark;
            switch (value) {
              case 0:
                state_remark = '未付款'
                break;
              case 1:
                state_remark = '已付款'
                break;
              case 2:
                state_remark = '退款处理中'
                break;
              case 3:
                state_remark = '已退款'
                break;
              default:
                state_remark = ''
                break;
            }

            return '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
          },
        },
        系统订单号: {
          field: 'system_order_no',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        系统订单状态: {
          field: 'system_order_status',
          //自定义回调函数
          callback: (value) => {
            var state_remark;
            switch (value) {
              case 100:
                state_remark = '下单待处理'
                break;
              case 101:
                state_remark = '下单成功'
                break;
              case 102:
                state_remark = '下单失败'
                break;
              case 201:
                state_remark = '取消订单成功'
                break;
              case 202:
                state_remark = '取消订单失败'
                break;
              default:
                state_remark = ''
                break;
            }

            return '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
          },
        },
        操作处理失败信息: {
          field: 'handle_error_message',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
          备注: {
            field: 'remark',
            //自定义回调函数
            callback: (value) => {
              return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
            },
          },
        创建时间: {
          field: 'created_at',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
      },
    };
  },
  created() {
    if (this.$route.query.settlement_date) {
      this.listQuery.actual_end_travel_date_start_at = moment(this.$route.query.settlement_date).startOf('month').format('YYYY-MM-DD');
      this.listQuery.actual_end_travel_date_end_at = moment(this.$route.query.settlement_date).endOf('month').format('YYYY-MM-DD');
      this.listQuery.order_state_arr = [Number(this.$route.query.order_state)]
      this.listQuery.system_order_status_arr = [Number(this.$route.query.system_order_status)]
      // this.dateArr1 = [this.listQuery.end_travel_date_start_at, this.listQuery.end_travel_date_end_at];
    }


    // this.fetchClientNames('');
    this.getList();
  },
  watch: {
    dateArr(newVal, oldVal) {
      if (newVal) {
        this.listQuery.start_at = newVal[0];
        this.listQuery.end_at = newVal[1];
      } else {
        this.listQuery.start_at = "";
        this.listQuery.end_at = "";
      }
    },
    dateArr1(newVal, oldVal) {
      if (newVal) {
        this.listQuery.end_travel_date_start_at = newVal[0];
        this.listQuery.end_travel_date_end_at = newVal[1];
      } else {
        this.listQuery.end_travel_date_start_at = "";
        this.listQuery.end_travel_date_end_at = "";
      }
    },
    dateArr2(newVal, oldVal) {
      if (newVal) {
        this.listQuery.order_date_start_at = newVal[0]+" 00:00:00";
        this.listQuery.order_date_end_at = newVal[1]+" 23:59:59";
      } else {
        this.listQuery.order_date_start_at = "";
        this.listQuery.order_date_end_at = "";
      }
    },
  },
  methods: {
    fetchClientNames(query) {
      // 每次新搜索或首次加载都重置
      this.clientPage = 1;
      this.clientKeyword = query;
      this.clientFinished = false;
      this.clientNameOptions = [];
      this.loadMoreClients();
    },
    loadMoreClients() {
      if (this.clientFinished || this.loadingClients) return;

      this.loadingClients = true;

      request({
        url: '/api/appClientend/app-client/list',
        method: 'get',
        params: {
          name: this.clientKeyword,
          page: this.clientPage,
          limit: this.pageSize
        }
      })
          .then(res => {
            const list = res.data.data || [];

            if (list.length < this.pageSize) this.clientFinished = true;

            this.clientNameOptions = this.clientNameOptions.concat(
                list.map(item => ({
                  label: item.name, // 客户端名称
                  value: item.id  // 也使用名称作为 value
                }))
            );
            if (this.$route.query.app_client_id) {
              this.listQuery.app_client_id = Number(this.$route.query.app_client_id);
            }
            this.clientPage++;
          })
          .finally(() => {
            this.loadingClients = false;
          });
    },
    // 监听下拉框打开，绑定滚动分页
    handleClientSelectVisible(visible) {
      if (!visible) return;

      this.$nextTick(() => {
        // 使用 Element UI 的 class：el-scrollbar__wrap
        const dropdown = document.querySelector('.el-scrollbar__wrap');
        if (dropdown && !dropdown.dataset.bound) {
          dropdown.dataset.bound = 'true'; // 防止重复绑定

          dropdown.addEventListener('scroll', () => {
            const nearBottom = dropdown.scrollTop + dropdown.clientHeight >= dropdown.scrollHeight - 10;
            if (nearBottom) {
              this.loadMoreClients();
            }
          });
        }
      });

    },
    handleExport() {
      if (this.listQuery.state_arr) {
        this.listQuery.state = this.listQuery.state_arr.join(',')
      }

      if (this.listQuery.order_state_arr) {
        this.listQuery.order_state = this.listQuery.order_state_arr.join(',')
      }

      if (this.listQuery.system_order_status_arr) {
        this.listQuery.system_order_status = this.listQuery.system_order_status_arr.join(',')
      }

      if (this.listQuery.pay_state_arr) {
        this.listQuery.pay_state = this.listQuery.pay_state_arr.join(',')
      }
      this.exportLoading = true
      var listQuery = JSON.parse(JSON.stringify(this.listQuery))
      listQuery.limit = 9999999999
      return request({
        url: '/api/appClientend/order/orderList',
        method: 'get',
        params: listQuery,
      })
          .then((response) => {
            return response.data.items
          })
          .finally(() => {
            this.exportLoading = false
          })
    },
    getList() {
      if (this.listQuery.state_arr) {
        this.listQuery.state = this.listQuery.state_arr.join(',')
      }

      if (this.listQuery.order_state_arr) {
        this.listQuery.order_state = this.listQuery.order_state_arr.join(',')
      }

      if (this.listQuery.system_order_status_arr) {
        this.listQuery.system_order_status = this.listQuery.system_order_status_arr.join(',')
      }

      if (this.listQuery.pay_state_arr) {
        this.listQuery.pay_state = this.listQuery.pay_state_arr.join(',')
      }

      this.listLoading = true;
      request({
        url: "/api/appClientend/order/orderList",
        method: "get",
        params: this.listQuery,
      }).then(response => {
        this.list = response.data.items;
        this.total = response.data.total;
        this.data = response.data.count;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    errorRow({row}) {
      let errorStatus = [102, 202];
      if (errorStatus.includes(row.system_order_status) && row.error_order_handle_status === 0) {
        return "error-row";
      }
      return "";
    },
    // 修改到店时间
    handleModifyLastArrTime(row) {
      this.modifyLastArrTimeForm = {
        order_id: row.order_id,
        last_arr_time: "",
      };
      this.dialogVisibleModifyLastArrTime = true;
      this.$nextTick(() => {
        this.$refs["modifyLastArrTimeForm"].clearValidate(); //清除校验结果
      });
    },
    saveDataModifyLastArrTime() {
      this.$refs["modifyLastArrTimeForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          request({
            url: "/api/backend/order/modifyLastArrTime",
            method: "post",
            data: this.modifyLastArrTimeForm
          }).then(() => {
            this.dialogVisibleModifyLastArrTime = false;
            this.$message({
              type: "success",
              message: "操作成功"
            });
            this.getList();
          }).finally(() => {
            this.btnLoading = false;
          });
        }
      });
    },
    // 修改系统状态
    handleChangeSystemOrderStatus(row) {
      this.changeSystemOrderStatusForm = {
        order_id: row.order_id,
        system_order_status: row.system_order_status,
      };
      this.dialogVisibleChangeSystemOrderStatus = true;
      this.$nextTick(() => {
        this.$refs["changeSystemOrderStatusForm"].clearValidate(); //清除校验结果
      });
    },
    saveDataChangeSystemOrderStatus() {
      this.$refs["changeSystemOrderStatusForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          request({
            url: "/api/backend/order/changeSystemOrderStatus",
            method: "post",
            data: this.changeSystemOrderStatusForm
          }).then(() => {
            this.dialogVisibleChangeSystemOrderStatus = false;
            this.$message({
              type: "success",
              message: "操作成功"
            });
            this.getList();
          }).finally(() => {
            this.btnLoading = false;
          });
        }
      });
    },
    // 重新下单
    handleReOrder(row) {
      this.$confirm("确认继续该操作", "提示", {
        type: "warning"
      }).then(() => {
        request({
          url: "/api/backend/order/reOrder",
          method: "post",
          data: {
            order_id: row.order_id
          }
        }).then(() => {
          this.getList();
          this.$message({
            type: "success",
            message: "操作成功"
          });
        });
      }).catch(() => {
      });
    },
    // 取消订单
    handleCancelOrder(row) {
      this.$confirm("确认继续该操作", "提示", {
        type: "warning"
      }).then(() => {
        request({
          url: "/api/backend/order/cancelOrder",
          method: "post",
          data: {
            order_id: row.order_id
          }
        }).then(() => {
          this.getList();
          this.$message({
            type: "success",
            message: "操作成功"
          });
        });
      }).catch(() => {
      });
    },
    // 处理完成
    handleComplete(row) {
      this.$confirm("确认继续该操作", "提示", {
        type: "warning"
      }).then(() => {
        request({
          url: "/api/backend/order/handleComplete",
          method: "post",
          data: {
            order_id: row.order_id
          }
        }).then(() => {
          this.getList();
          this.$message({
            type: "success",
            message: "操作成功"
          });
        });
      }).catch(() => {
      });
    },
    // 同步订单
    syncOrder(row) {
      this.$confirm("确认继续该操作", "提示", {
        type: "warning"
      }).then(() => {
        request({
          url: "/api/backend/order/syncOrder",
          method: "post",
          data: {
            order_id: row.order_id
          }
        }).then(() => {
          this.getList();
          this.$message({
            type: "success",
            message: "操作成功"
          });
        });
      }).catch(() => {
      });
    },
    handleCompleteStatus(row) {
      let errorStatus = [102, 202];
      return !(errorStatus.includes(row.system_order_status) && row.error_order_handle_status === 0)
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box-card {
  text-align: center;

  .value {
    color: #546dfe;
    font-weight: bold;
    font-size: 26px;
  }

  .subtitle {
    font-size: 12px;
    color: gray;
    margin-top: 6px;
  }
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  margin-bottom: 20px;
}

::v-deep .el-table .error-row {
  background-color: rgba(255, 0, 0, 0.2);
}
</style>
